<template>
  <!-- <nut-skeleton width="375px" height="400px" :title="false" row="1" class="item"></nut-skeleton> -->
  <view style="position: relative;width: 100%;height: 450px;">
    <view class="flex-row justify-center align-center" 
    style="position: absolute;top:20px;left: 20px;background-color: transparent;">
      <text style="font-weight: bold;">北京市</text>
      <text class="iconfont icon-arrow-down-fill"></text>
    </view>
    <view style="width: 100%;">
      <img :src="require('@/assets/images/background/bg-map.png')" 
      style="width: 100%;height:350px;"/>
    </view>
    <view style="position: absolute;bottom: 0px;width: 100%;">
      <view class="card" style="height: 100px;">
        <view class="flex-column justify-center align-center">
          <view class="flex-row align-center" style="width: 100%;height:48px;">
            <view style="border-radius: 50%;background-color: #44aba4;width: 5px;height: 5px;margin: 0 15px;"></view>
            <text style="font-size: 14px;">从</text>
            <text style="font-size: 14px;color: #44aba4;margin: 0 5px;font-weight: bold;">安德里北街地铁站</text>
            <text style="font-size: 14px;">上车</text>
          </view>
          <view class="flex-row align-center" 
          style="width: 100%;height:48px;background-color: #edeef1;border-radius: 10px;">
            <view style="border-radius: 50%;background-color: #ff7329;width: 5px;height: 5px;margin: 0 15px;"></view>
            <text style="font-size: 18px;font-weight: bold;margin-right: 10px;">您想去哪儿？</text>
            <text style="font-size:14px;padding: 6px 10px;border-radius: 10px;background-color: white;">去：顺义区...安泰大街</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="card" style="height: 160px;margin-bottom: 20px;">
    <view class="grid-box">
      <view v-for="(item, i) in menuList" :key="i"
      class="grid-box-item flex-column justify-center align-center">
        <text :class="`iconfont ${item.itemIconClass}`" 
        style="font-size: 28px;margin-bottom: 5px;"></text>
        <text style="font-size: 12px;">{{ item.itemText }}</text>
      </view>
    </view>

  </view>
  <!-- 福利活动 -->
  <view class="card" style="height: 160px;margin-bottom: 20px;padding: 0;position: relative;">
    <img :src="require('@/assets/images/background/fulihuodong.jpeg')" 
      style="width: 100%;height:160px;border-radius: 5px;"/>
  </view>
  <!-- 省钱套餐 -->
  <view class="card" style="height: 160px;margin-bottom: 20px;padding: 0;position: relative;">
    <img :src="require('@/assets/images/background/shenqiantaocan.jpeg')" 
      style="width: 100%;height:160px;border-radius: 5px;"/>
  </view>
  <!-- 新人助力 -->
  <view class="card" style="height: 160px;margin-bottom: 20px;padding: 0;position: relative;">
    <img :src="require('@/assets/images/background/xinrenzhuli.jpeg')" 
      style="width: 100%;height:160px;border-radius: 5px;"/>
  </view>
  <!-- 车主福利 -->
  <view class="card" style="height: 160px;margin-bottom: 20px;padding: 0;position: relative;">
    <img :src="require('@/assets/images/background/chezhufuli.jpeg')" 
      style="width: 100%;height:160px;border-radius: 5px;"/>
  </view>

  <view style="display: flex;justify-content: center;align-items: center;height: 100px;margin-bottom: 20px;">
    <view style="display: flex;justify-content: center;align-items: center;flex-direction: row;">
      <text style="width: 30px;height: 1px;background-color: #959595;"></text>
      <text style="margin: 0 10px;color: #959595;">协议、证照、平台规则及客服</text>
      <text style="width: 30px;height: 1px;background-color: #959595;"></text>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
import { Dongdong } from '@nutui/icons-vue-taro'

const msg = 'HOME'
const list = ref()

const menuList = [
  {
    itemIconClass: 'icon-chuzuche',
    itemText: '出租车'
  },
  {
    itemIconClass: 'icon-shunfengche',
    itemText: '顺风车'
  },
  {
    itemIconClass: 'icon-huoche',
    itemText: '送货'
  },
  {
    itemIconClass: 'icon-daba',
    itemText: '大巴路线'
  },
  {
    itemIconClass: 'icon-huodonggonggao',
    itemText: '公告'
  },
  {
    itemIconClass: 'icon-fuli',
    itemText: '福利活动'
  },
  {
    itemIconClass: 'icon-prebook',
    itemText: '预约'
  },
  {
    itemIconClass: 'icon-gengduo',
    itemText: '更多'
  }
];

// 组件挂载时
onMounted(() => {
  // setTimeout(() => {
  //   list.value = [
  //     'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  //     'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  //     'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  //     'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
  //   ]
  // }, 3000)
})

// 组件卸载时
onUnmounted(() => {
  console.log('page unmounted')
})

// 组件激活时（keep-alive缓存）
onActivated(() => {
  console.log('page activated')
})

// 组件失活时（keep-alive缓存）
onDeactivated(() => {
  console.log('page deactivated')
})
</script>
<style lang="scss" scoped>
// :deep(.nut-cell) {
//   margin: 0;
// }
</style>